<script>
import message from "@/tools/Message";
import {ElMessageBox} from "element-plus";

export default {
	name: "GoodsBaseSetting",
	data() {
		return {
			queryModel: {
				name: "",
				desc: "",
				timeRange: "",
				category: 0
			},
			categories: ["男装", "女装", "围巾"]
		}
	},
	methods: {
		cancel() {
			this.$emit("cancel")
		},
		submit() {
			message.success('设置商品基本属性：' + JSON.stringify(this.queryModel))
		},
		addCategory() {
			ElMessageBox.prompt("输入商品分类名", "添加分类", {
				confirmButtonText: '添加',
				cancelButtonText: '取消',
				inputValidator: (value) => {if (!value) {return false} return value.length >= 2},
				inputErrorMessage: '无效的分类名',
			}).then(({value}) => {
				this.categories.push(value)
			}).catch(() => {
				console.log("取消添加分类")
			})
		}
	}
}
</script>

<template>
	<div>
		<el-container class="content-row">
			<div class="input-tip">
				商品名称:
			</div>
			<div class="input-field">
				<el-input v-model="queryModel.name"></el-input>
			</div>
		</el-container>
		<el-container class="content-row">
			<div class="input-tip">
				商品简介:
			</div>
			<div class="input-field">
				<el-input type="textarea" :rows="3" v-model="queryModel.desc"></el-input>
			</div>
		</el-container>
		<el-container class="content-row">
			<div class="input-tip">
				商品封面:
			</div>
			<el-upload
				:auto-upload="false"
				:limit="1"
				list-type="picture-card">
				<i class="el-icon-plus"></i>
			</el-upload>
		</el-container>
		<el-container class="content-row">
			<div class="input-tip">
				列表图片:
			</div>
			<el-upload
				:auto-upload="false"
				:limit="5"
				list-type="picture-card">
				<i class="el-icon-plus"></i>
			</el-upload>
		</el-container>
		<el-container class="content-row">
			<div class="input-tip">
				上架日期:
			</div>
			<div class="input-field">
				<el-date-picker
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					v-model="queryModel.timeRange">
				</el-date-picker>
			</div>
		</el-container>
		<el-container class="content-row">
			<div class="input-tip">
				商品分类:
			</div>
			<div class="input-field">
				<el-select v-model="queryModel.category">
					<el-option v-for="(item, index) in categories" :key="index" :value="index" :label="item"></el-option>
				</el-select>
			</div>
			<div style="margin-top:6px">
				<el-button type="primary" size="small" round @click="addCategory">添加分类</el-button>
			</div>
		</el-container>
		<el-container class="content-row">
			<el-button type="success" plain @click="submit">提交</el-button>
			<div style="margin-left:40px"></div>
			<el-button type="warning" plain @click="cancel">取消</el-button>
		</el-container>
	</div>
</template>

<style scoped>

</style>